Using a Dropdown Box Control to Populate a List with SQL Data
Description
It is possible to create a dropdown box control with static choices that, when selected, will populate a static list with SQL based data.
For a visual explanation of this process watch this video.
Create the Dropdown Box and List Controls
In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [DropdownBox] option to add a dropdown box control to the component. Give the control the name and label 'country'.
Highlight the dropdown box in the controls tree. In the properties list on the right scroll down to the 'DropDownBox Properties' section and click on the [...] button next to the 'Choices' property.
In the 'Define Choices' dialog select 'Static' in the 'Choices are' menu. In the 'Static Choices' section add the following static choices. Click OK.
USA UK France Canada Italy Spain
Scroll down the properties list to the 'Javascript' section. Click the [...] button next to the 'onChange' property.
In the 'Edit onChange Event' dialog select the 'Action Javascript' option in the editing mode menu. Click the 'Add New Action' button.
Type 'ajax' into the filter list textbox and select the 'Ajax Callback' action and click OK.
In the action's property settings set the 'Callback type' property to 'InternalXbasicFunction'.
Set the 'Function name' property to be 'populateList', this will be defined in the next section. Click OK and 'Save'.
Return to the 'Data Controls' menu and click on the [List] option to add a list control to the component. Leave the name of the list control set to 'list1'.
Highlight the list control in the controls tree. Click the [...] button next to the 'List properties' property in the 'List Properties' section. The List Builder will open.
In the List Builder open the 'Data Source' pane. Set the 'Data Source Type' to 'Static'.
In the data source property settings click the [...] button next to the 'Static data' property.
Add the following static choices to the 'Static Choices' dialog. Click OK.
CustomerId|ContactName|City|Country
Open the 'List Layout' pane. Use the blue > arrow to move the 'CustomerId', 'ContactName', 'City', and 'Country' fields from the 'Available Fields section to the 'Columns in List' section. Click OK to close the list builder.
Define an Xbasic Function that Populates the List from the Dropdown Selection
In the UX Builder's main menu expand the 'Code' menu and click on the 'Xbasic functions' page.
Define the populateList function by adding the following code to the page.
function populateList as c (e as p) dim cn as sql::Connection flag = cn.open("::Name::AADemo-Northwind") if flag = .f. then dim js as c js = "alert('Could not connect to database.');" populateList = js exit function end if dim sql as c sql = "select CustomerId, ContactName, City, Country from Customers where Country = :whatcountry" dim args as sql::Arguments args.add("whatCountry",e.datasubmitted.country) flag = cn.Execute(sql,args) if flag = .f. then js = "alert('Could not execute query. Error: " + js_escape(cn.CallResult.text) + "');" populateList = js cn.close() exit function end if dim rs as sql::ResultSet rs = cn.ResultSet dim json as c json = rs.ToJSONObjectSyntax() json = stritran(json,crlf(),"," + crlf()) json = "[" + rtrim(json,",") + "]" dim js as c js = "var lObj = {dialog.object}.getControl('list1');" + crlf() js = js + "var _data = " + json + crlf() js = js + "lObj.populate(_data);" populateList = js cn.FreeResult() delete rs cn.close() end function
A section of the populateList function
An Explanation of the populateList() Function
The populateList() function takes as an argument 'e', which represents a pointer to some data that was submitted. This pointer is used midway through the function. Inside the function definition, the first couple lines of code create a connection to the SQL database using the Open() method.
dim cn as sql::Connection
flag = cn.open("::Name::AADemo-Northwind")If the connection string you are using has a different name than the one displayed, "AADemo-Northwind", then you can easily add the correct connection string to the Open() method by doing the following:
Inside the cn.open() method's parenthesis, erase the existing connection string and then re-type the opening "::Name::" inside the parenthesis. The bubble help for the SQL::Connection.Open() method should appear.
[SQLConnectionString as C[ should appear highlighted in black inside the bubble help. With the mouse, right click on this black highlight. The 'AlphaDAO Connection Strings' genie will open. Select the named connection string that you want to connect to and click OK.
The connection string should now be inserted inside the method:
If the connection fails then an alert is sent out stating that the connection could not be opened. A variable named 'sql' is set to be a SQL statement that defines the query against the sql table to be executed.
dim sql as c sql = "select CustomerId, ContactName, City, Country from Customers where Country = :whatcountry"
The end of this statement sets the 'Country' field in the SQL table equal to an argument named 'whatcountry'. The next line creates the sql argument object. By use of the add() method, this object is used to create an argument called 'whatCountry', that is then set to have the value of 'e.datasubmitted.country'. 'e.datasubmitted.country' uses the 'e' argument, that was passed in to the populateList function, to get a pointer to the selection that the user made from among the static choices listed in the 'country' dropdown box control.
dim args as sql::Arguments
args.add("whatCountry",e.datasubmitted.country)Once the query against the sql database is defined, it is executed using the 'Execute()' method. If the query fails, then an alert is sent out that says "Could not execute query." ans then lists an error message. After the query executes a result set is created. The ToJSONObjectSyntax() method on the result set then called. This creates a crlf delimited string on JSON objects.
dim rs as sql::ResultSet rs = cn.ResultSet dim json as c json = rs.ToJSONObjectSyntax()
If you run the component at this point, and select a country from the dropdown list, then the string of JSON objects looks something like this:
For this component, however, we need a json array; and so each of the json objects shown above will need to be seperated, or delimited, using a comma. The following lines of code are used to translate each 'crlf()' in the string to be a 'crlf()' plus a comma.
json = stritran(json,crlf(),"," + crlf())
This almost completes the array except that json arrays should not have a trailing comma after the last item in the array. To remove any trailing commas the following code is used.
json = "[" + rtrim(json,",") + "]"
Now that the json data that will be used to populate the list control has been created, it is necessary to craft a javascript response to send from the server back to the client. The first step is to get a pointer to the list control:
js = "var lObj = {dialog.object}.getControl('list1');" + crlf()All of the sql data to be used to populate the list is then assigned to a javascript variable named "_data". This is done by first creating the _data variable and then taking all of the json data, that was generated from the query, and assigning it to the _data variable using the populate() method.
js = js + "var _data = " + json + crlf() js = js + "lObj.populate(_data);"
The list control is then populated by using the Xbasic function 'populateList' and setting it equal to the returned value. Finally the result set is set to free, deleted, and then closed.
Run the Component
Run the component in Live Preview. Click the dropdown and make a selection from the static list of choices.
The SQL data relating to the selection should be displayed.
See Also